<html>
    <head>
        <meta charset="utf-8">
        <title>使用</title>
    </head>
    <body>
        <script src="jquery-3.7.1.min.js"></script>

        <h1 id="testH1">你好</h1>
        <div id="myDiv1">id选择器1<span>span中的内容</span></div>
        <div id="mydiv2" class="blue">元素选择器</div>
        <span class="blue">样式选择器</span>

    </body>

    <script>
        // 4.1 操作元素的属性

        // 4.1.1 获取元素的属性
        // 使用原生JavaScript获取元素
        var div = document.getElementById("testH1");
        console.log(div);

        // 使用jQuery获取元素
        var $testH1 = $("#testH1");

        // 1. attr() 方法 - 获取指定的属性值
        console.log($testH1.attr("id")); // 输出: testH1

        // 2. prop() 方法 - 获取指定的属性值
        console.log($testH1.prop("id")); // 输出: testH1

        // 4.1.2 属性的分类
        // 1. 固有属性：元素本身就有的属性 id name class style
        // 2. 返回值是boolean的属性 checked selected disabled

        // 1. 获取属性
        // 对于固有属性，attr() 和 prop() 都可以获取
        console.log($testH1.attr("id")); // 使用attr()获取id
        console.log($testH1.prop("id")); // 使用prop()获取id

        // 2. 区别
        // 对于返回值是boolean的属性：
        // 若设置了属性，attr()返回具体的值，prop()返回true
        // 未设置属性时，attr()返回undefined，prop()返回false

        // 假设有一个checkbox
        var $checkbox = $("<input type='checkbox' checked>");
        console.log($checkbox.attr("checked")); // 如果选中，输出 "checked"
        console.log($checkbox.prop("checked")); // 如果选中，输出 true

        // 3. 自定义属性：attr()可以获取，prop()不可以获取
        $testH1.attr("data-custom", "customValue");
        console.log($testH1.attr("data-custom")); // 输出: customValue
        console.log($testH1.prop("data-custom")); // 输出: undefined

        // 3. 返回值是Boolean的属性 元素设置了属性
        // attr   checked  prop:  true

        // 4.1.3 设置元素的属性
        // 1. 使用attr()设置属性
        $testH1.attr({
            "title": "这是一个标题",
            "data-custom": "新的自定义值"
        });

        // 2. 使用prop()设置属性
        $testH1.prop("title", "这是通过prop设置的标题"); // 注意：对于非布尔属性，通常不使用prop()

        // 4.1.4 删除元素的属性
        // 移除之前设置的title属性
        $testH1.removeAttr("title");

        // 总结：
        // 如果属性的类型是boolean（checked,selected,disabled）则使用prop()方法
        // 示例：为一个复选框设置和移除checked属性
        var $anotherCheckbox = $("<input type='checkbox'>");
        $anotherCheckbox.prop("checked", true); // 设置checked属性
        console.log($anotherCheckbox.prop("checked")); // 输出: true
        $anotherCheckbox.prop("checked", false); // 移除checked属性
        console.log($anotherCheckbox.prop("checked")); // 输出: false
    </script>

</html>